<!--
 * @Author: Vi卡农
 * @Date: 2020-05-22 10:37:58
 * @LastEditTime: 2020-05-25 15:31:39
 * @Description: -数据权限-
 * @FilePath: \cshf_admin\src\views\modules\sys\DataPermission.vue
--> 
<template>
  <div class="DataPermission">
    <el-card shadow="never" class="aui-card--fill">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item_,index) in tabsList"
          :label="item_.label"
          :name="item_.name"
          :key="item_.name"
        >
          <el-tabs v-model="activeName_" @tab-click="handleClick_">
            <el-tab-pane
              v-for="(itm,index) in tabsSubmenu[item_.name]"
              :label="itm.label"
              :name="itm.id"
              :key="itm.id"
            ></el-tab-pane>
          </el-tabs>
          <el-table style="width: 100%" border :data="tableData" v-loading="loading">
            <template v-for="(item,index) in tableHead">
              <el-table-column prop="name" label :key="111" v-if="index==0">
                <template slot-scope="scope">{{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column :prop="item.dictValue" :label="item.dictLabel" :key="index">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row[item.remark].type"
                    placeholder="请选择"
                    @change="typeChange(scope.row[item.remark])"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      roleID: this.$route.query.ID ? this.$route.query.ID : "",
      activeName: "house",
      activeName_: "房源信息",
      activeId: 123,
      tabsList: [
        {
          name: "house",
          label: "房源",
        },
        {
          name: "customer",
          label: "客源",
        },
        {
          name: "intention",
          label: "意向单",
        },
        {
          name: "contract",
          label: "合同",
        },
      ],
      tabsSubmenu: {
        house: [
          {
            name: "房源信息",
            label: "房源信息",
            id: "1234",
          },
          {
            name: "房源跟进",
            label: "房源跟进",
            id: "12344",
          },
          {
            name: "钥匙管理",
            label: "钥匙管理",
          },
          {
            name: "房源图片",
            label: "房源图片",
          },
          {
            name: "委办管理",
            label: "委办管理",
          },
          {
            name: "房源封盘",
            label: "房源封盘",
          },
        ],
        customer: [
          {
            name: "客源列表",
            label: "客源列表",
          },
          {
            name: "客源跟进",
            label: "客源跟进",
          },
          {
            name: "客源带看",
            label: "客源带看",
          },
          {
            name: "客源封盘",
            label: "客源封盘",
          },
        ],
        intention: [
          {
            name: "意向单管理",
            label: "意向单管理",
          },
        ],
        contract: [
          {
            name: "合同管理",
            label: "合同管理",
          },
          {
            name: "合同图片",
            label: "合同图片",
          },
        ],
      },
      tableHead: [],
      tableData: [],
      options: [
        {
          value: 1,
          label: "个人",
        },
        {
          value: 2,
          label: "组",
        },
        {
          value: 3,
          label: "店",
        },
        {
          value: 4,
          label: "区域",
        },
        {
          value: 5,
          label: "部门",
        },
        {
          value: 6,
          label: "公司",
        },
      ],
      loading: true,
    };
  },
  created() {
    //this.getTableData();
    this.getMenuTableData();
  },
  methods: {
    handleClick(tab, event) {
      this.activeName_ = this.tabsSubmenu[tab.name][0].name;
    },
    handleClick_(tab, event) {
      console.log(tab.name);
      console.log(event.key);

      this.getTableData(tab.name);
    },
    getMenuTableData() {
      let _this = this;
      _this.loading = true;
      this.$http
        .get("/sys/role/getRoleMenuList", {
          params: {},
        })
        .then(({ data: res }) => {
          if (res.code != 0) {
            return this.$message.error(res.msg);
          }
          _this.tabsSubmenu = res.data;
          console.log(_this.tabsSubmenu);
          _this.loading = false;
        })
        .catch(() => {});
    },
    getTableData(id) {
      let _this = this;
      _this.loading = true;
      this.$http
        .get("/sys/role/getRoleDataList", {
          params: {
            roleId: _this.roleID,
            menuId: id,
          },
        })
        .then(({ data: res }) => {
          if (res.code != 0) {
            return this.$message.error(res.msg);
          }
          _this.tableHead = res.data.dictType;
          _this.tableData = res.data.dataScope;
          _this.loading = false;
        })
        .catch(() => {});
    },
    typeChange(item) {
      let _this = this;
      this.$http
        .put("/sys/role/updateRoleData", {
          id: item.id,
          menuId: item.menuId,
          moduleType: item.moduleType,
          roleId: item.roleId,
          type: item.type,
        })
        .then(({ data: res }) => {
          if (res.code != 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("修改成功");
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
</style>